<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
  </div>
  <button 
  v-for="item,index in boss" 
  :key="item"
  @click="handleSelect(index)"
  >{{index}}:{{item}}</button>
  <div style="padding: 30px;">
    {{current}}成为您的小弟
  </div>
  <div style="padding: 30px">
    <button @click="handleOver">选择完成</button>
  </div>
  <div>{{ overText }}</div>
</template>

<script lang="ts">
import { 
  defineComponent, 
  ref, 
  reactive, 
  toRefs, 
  onBeforeMount, 
  onMounted, 
  onRenderTracked, 
  onRenderTriggered,
  watch 
} from "vue";
interface DataProps {
  boss: string[]
  current: string
  handleSelect: (index:number) => void
}
export default{
  name: "Home",
  setup() {

    /**
     * reactive
     */
    const data:DataProps = reactive({
      boss: ['Jack', 'Pony', 'Shen'],
      current: '',
      handleSelect(index:number) {
       data.current = data.boss[index]

      }
    })

    // const boss    = ref(['Jack', 'Pony', 'Shen'])
    // const current = ref("") 
    // const handleSelect = (index:number) => {
    //    current.value = boss.value[index]
    // }

    /**
     * 生命周期执行顺序
     * 1. setup, 
     * 2. onBeforeMount, 
     * 3. onMounted, 
     * 4. onBeforeUpdate, 
     * 5. onUpdated, 
     * 6. onBeforeUnmount   组件卸载之前
     * 7. onUnmount         组件卸载之后
     * 8. onErrorCaptured    捕获子组件异常
     */
    onBeforeMount(()=> {
      console.log('onBeforeMount')
    })

    onMounted(()=> {
      console.log('onMounted')
    })
    
    /**
     * 状态追踪
     * 全部跟踪，比如散弹枪
     * eg: setData
     */
    onRenderTracked((e) => {
       console.log(e, '状态追踪')
    })

    /**
     * 触发追踪
     * 精准跟踪，比如狙击枪
     * eg: click
     */
    onRenderTriggered((e) => {
       console.log(e, '渲染触发')
    })
    
    /**
     * watch
     */
    const overText = ref('大粽子')
    const handleOver = () => {
      overText.value = '大粽子' + data.current
    }
    watch([overText, () => data.current], (newVal, oldVal) => {
       console.log(newVal, 'watch---new')
       console.log(oldVal, 'watch---old')
       document.title = newVal[0]
    }) 




    /**
     * 需要在视图中使用才要return
     */
    return {
      ...toRefs(data),
      overText,
      handleOver
    }
  }
}
</script>
